<!DOCTYPE html>
<html>
<head>
    <!-- 页面meta -->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>题库管理</title>
    <meta name="description" content="题库管理">
    <meta name="keywords" content="题库管理">
    <meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">
    <!-- 引入样式 -->
    <link rel="stylesheet" href="../css/element-ui.css">
    <link rel="stylesheet" href="../plugins/font-awesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="../css/style.css">
</head>

<body class="hold-transition">
<div id="app">
    <div class="content-header common-search-border1">
        <el-button class="butAdd" @click="handleCreate"><i class="fa fa-plus" aria-hidden="true"></i> 新增试题
        </el-button>
    </div>
    <div class="app-container">
        <div class="box common-search-border2">
            <div class="filter-container">
                <!-- 搜索栏 -->
                <el-form :inline="true" :model="requestParameters" ref="requestParameters" class="formInfo"
                         label-width="70px">
                    <el-form-item label="学科" label-width="40px" prop="courseId">
                        <el-select placeholder="请选择" v-model="requestParameters.courseId">
                            <el-option :key="item.id" :label="item.name" :value="item.id"
                                       v-for="item in courses"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="企业" label-width="40px" prop="companyId">
                        <el-select placeholder="请选择" v-model="requestParameters.companyId">
                            <el-option :key="item.id" :label="item.shortName" :value="item.id"
                                       v-for="item in companyList"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="状态" label-width="40px" prop="status">
                        <el-select placeholder="请选择" v-model="requestParameters.status">
                            <el-option :key="item.id" :label="item.value" :value="item.id"
                                       v-for="item in baseData.publishStatus"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="难度" label-width="40px" prop="difficulty">
                        <el-select placeholder="请选择" v-model="requestParameters.difficulty">
                            <el-option :key="item.id" :label="item.value" :value="item.id"
                                       v-for="item in baseData.difficulty"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="题型" label-width="40px" prop="type">
                        <el-select placeholder="请选择" v-model="requestParameters.type">
                            <el-option :key="item.id" :label="item.value" :value="item.id"
                                       v-for="item in baseData.questionsType"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="关键字" label-width="60px" prop="keyWord">
                        <el-input placeholder="请输入" v-model="requestParameters.keyWord" style="width: 200px;"
                                  class="filter-item"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button @click="handleRest">清除</el-button>
                        <el-button type="primary" class="butOK" @click="handleSearch">搜索</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </div>
        <div class="box common-table-border" style="margin:8px 0 0;">
            <el-tabs v-model="requestParameters.activeTabName" type="card" @tab-click="handleSearch">
                <el-tab-pane label="全部" name="1"></el-tab-pane>
                <el-tab-pane label="待审核" name="2"></el-tab-pane>
                <el-tab-pane label="已审核" name="3"></el-tab-pane>
            </el-tabs>
            <el-table :data="items" fit highlight-current-row style="width: 100%;">
                <el-table-column label="序号" align="center" width="50px">
                    <template slot-scope="scope">
                        <span>{{ scope.$index+1 }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="试题编号" align="center" width="100px">
                    <template slot-scope="scope">
                        <span>{{ scope.row.number }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="学科" align="center">
                    <template slot-scope="scope">
                        <span class="link-type">{{ scope.row.courseName }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="题型" align="center" width="100px">
                    <template slot-scope="scope">
                        <span class="link-type">{{ scope.row.type | typeTransform(baseData.questionsType) }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="题干" align="center">
                    <template slot-scope="scope">
                        <span v-html="scope.row.subject"></span>
                    </template>
                </el-table-column>
                <el-table-column label="录入时间" align="center">
                    <template slot-scope="scope">
                        {{ scope.row.createDate | dateTransform }}
                    </template>
                </el-table-column>
                <el-table-column label="难度" align="center" width="100px">
                    <template slot-scope="scope">
                        <span>{{ scope.row.difficulty | difficultyTransform(baseData.difficulty) }}</span>
                    </template>
                </el-table-column>
                <!--<el-table-column label="使用次数" align="center">-->
                    <!--<template slot-scope="scope">-->
                        <!--<span>{{ scope.row.usedQty }}</span>-->
                    <!--</template>-->
                <!--</el-table-column>-->
                <el-table-column label="录入人" class-name="status-col">
                    <template slot-scope="scope">
                        <span>{{ scope.row.creator }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="审核状态" class-name="status-col">
                    <template slot-scope="scope">
                        <span>{{ scope.row.reviewLog.status | reiviewStatusTransform(baseData.reiviewStatus) }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="审核意见" class-name="status-col">
                    <template slot-scope="scope">
                        <span>{{ scope.row.reviewLog.comments }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="审核人" class-name="status-col">
                    <template slot-scope="scope">
                        <span>{{ scope.row.reviewLog.reviewer }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="发布状态" class-name="status-col">
                    <template slot-scope="scope">
                        <span>{{ scope.row.status | publishStatusTransform(baseData.publishStatus) }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="450px">
                    <template slot-scope="scope">
                        <div class="operation">
                            <el-button type="primary" size="mini" @click="handleExamine(scope.row)"><i
                                    class="fa fa-exclamation-circle"
                                    aria-hidden="true"></i> 审核
                            </el-button>
                            <el-button type="primary" size="mini" @click="handlePreview(scope.row)"><i
                                    class="fa fa-superpowers"
                                    aria-hidden="true"></i> 预览
                            </el-button>
                            <el-button type="primary" size="mini" @click="handleUpdate(scope.row)"><i
                                    class="fa fa-pencil-square-o"
                                    aria-hidden="true"></i> 修改
                            </el-button>
                            <el-button size="mini" type="danger" @click="handleOff(scope.row)"><i
                                    class="fa fa-exclamation-circle"
                                    aria-hidden="true"></i> 下架
                            </el-button>
                            <el-button size="mini" type="danger" @click="handleDeleted(scope.row)"><i
                                    class="fa fa-trash-o" aria-hidden="true"></i>
                                删除
                            </el-button>
                        </div>
                    </template>
                </el-table-column>
            </el-table>
            <div class="pagination-container">
                <el-pagination class="pagiantion" v-show="pagination.total>0" @size-change="handleSizeChange"
                               @current-change="handleCurrentChange"
                               :current-page="pagination.pageNum" :page-sizes="[10, 20, 50, 100]"
                               :page-size="pagination.pageSize" layout="total, sizes, prev, pager, next, jumper"
                               :total="pagination.total">
                </el-pagination>
            </div>
        </div>
    </div>
</div>
</body>
<!-- 引入组件库 -->
<script src="../js/vue.js"></script>
<script src="../js/element-ui.js"></script>
<script src="../js/base.js"></script>
<script src="../js/axios-0.18.0.js"></script>
<script>
    new Vue({
        el: '#app',
        data() {
            return {
                pagination: {
                    total: 0,
                    pageNum: 1,
                    pageSize: 10
                },
                loading: false,
                items: [],
                baseData: base,
                requestParameters: {
                    reviewStatus: '-1',
                    courseId: '',
                    companyId:'',
                    status: '',
                    difficulty: '',
                    type: '',
                    keyWord: ''
                },
                courses: [],
                is_classic: 1
            }
        },
        created() {
            // 学科下拉列表
            this.initCourses();
            //企业下拉列表
            this.initcompanyList();
            // 试题分页列表
            this.getList();
        },
        filters: {
            typeTransform: (type, types) => {
                let item = types.find(val => {
                    return val.id === type;
                });
                if (!item) {
                    return '';
                }
                return item.value;
            },
            dateTransform: (value) => {
                let index = value.lastIndexOf('.');
                return value.substr(0, index);
            },
            difficultyTransform: (difficulty, difficultys) => {
                let item = difficultys.find(val => {
                    return val.id === difficulty;
                });
                if (!item) {
                    return '';
                }
                return item.value;
            },
            reiviewStatusTransform: (status, reiviewStatus) => {
                let item = reiviewStatus.find(val => {
                    return val.id === status;
                });
                if (!item) {
                    return '';
                }
                return item.value;
            },
            publishStatusTransform: (status, publishStatus) => {
                let item = publishStatus.find(val => {
                    return val.id === status;
                });
                if (!item) {
                    return '';
                }
                return item.value;
            }
        },
        methods: {
            // 学科下拉列表
            initCourses() {
                let t = this;
                console.log("学科下拉列表请求参数：");
                //发送请求
                axios.get(app_url + "/course/findListAll.do").then((response) => {
                    if (response.data.flag) {
                        t.courses = response.data.result;
                    } else {
                        this.$message.error(response.data.message);
                    }
                });
            },
            //企业下拉列表
            initcompanyList() {
                axios.get(app_url + "/company/findListAll.do").then((response) => {
                    if (response.data.flag) {
                        console.log(response.data);
                        this.companyList = response.data.result;
                    } else {
                        //失败消息提醒
                        this.$message.error(response.data.message);
                    }
                }).catch((error) => {
                    console.log(error);
                    this.$message.error("网络异常");
                });
            },
            // 试题分页列表
            getList(currentPage) {
                let t = this;
                if(currentPage){
                    this.pagination.currentPage = currentPage;
                }
                // 必传参数
                let params = {
                    currentPage: t.pagination.pageNum,
                    pageSize: t.pagination.pageSize
                };
                // 选传参数
                let queryParams = {};
                let courseId = t.requestParameters.courseId;
                if (courseId !== '') {
                    queryParams.courseId = courseId;
                }
                let companyId = t.requestParameters.companyId;
                if (companyId !== '') {
                    queryParams.companyId = companyId;
                }
                let status = t.requestParameters.status;
                if (status !== '') {
                    queryParams.status = status;
                }
                let difficulty = t.requestParameters.difficulty;
                if (difficulty !== '') {
                    queryParams.difficulty = difficulty;
                }
                let type = t.requestParameters.type;
                if (type !== '') {
                    queryParams.type = type;
                }
                let keyWord = t.requestParameters.keyWord;
                if (keyWord !== '') {
                    queryParams.keyWord = keyWord;
                }
                let activeTabName = t.requestParameters.activeTabName;
                if (activeTabName === '2') {
                    queryParams.reviewStatus = 0;
                } else if (activeTabName === '3') {
                    queryParams.reviewStatus = 1;
                }
                if (Object.keys(queryParams).length) {
                    params.queryParams = queryParams;
                }
                console.log("精选题库列表请求参数：");
                console.log(params);

                axios.post(app_url + "/question/findClassicListByPage.do", params).then((response) => {
                    if (response.data.flag) {
                        //this.$message.success(response.data.message);
                        let result = response.data.result;
                        t.pagination.total = result.total;
                        t.items = result.rows;
                        t.loading = true;
                    } else {
                        this.$message.error(response.data.message);
                    }
                })

            },
            //清除
            handleRest() {
                if (this.$refs['requestParameters']) {
                    this.$refs['requestParameters'].resetFields();
                }
            },
            //搜索
            handleSearch() {
                this.getList();
            },
            handleSizeChange(val) {
                this.pagination.pageSize = val;
                this.pagination.pageNum = 1;
                this.getList();
            },
            handleCurrentChange(val) {
                this.pagination.pageNum = val;
                this.getList();
            },
            // 新增试题
            handleCreate() {
                window.location.href = "questionEditor.html?questionId=0&is_classic=" + this.is_classic;
            },
            // 审核试题
            handleExamine(row) {
                window.location.href = "questionPreview.html?questionId=" + row.id + "&is_classic=" + this.is_classic +
                    "&is_examine=1";
            },
            // 预览试题
            handlePreview(row) {
                window.location.href = "questionPreview.html?questionId=" + row.id + "&is_classic=" + this.is_classic +
                    "&is_examine=0";
            },
            // 修改试题
            handleUpdate(row) {
                window.location.href = "questionEditor.html?questionId=" + row.id + "&is_classic=" + this.is_classic;
            },
            // 试题下架
            handleOff(row) {
                this.$confirm('此操作将下架试题 ' + ', 是否继续?', '提示', {
                    type: 'warning'
                }).then(() => {
                    let params = {
                        questionId: row.id
                    };
                    console.log("试题下架请求参数：");
                    console.log(params);
                    axios.post(app_url + "/question/down.do?id=" + row.id).then((response) => {
                        if (response.data.flag) {
                            console.log("试题下架返回数据：");
                            console.log(response.data);
                            this.$message.success(response.data.message);
                            this.getList(this.pagination.currentPage);
                        } else {
                            //失败消息提醒
                            this.$message.error(response.data.message);
                        }
                    }).catch((error) => {
                        console.log(error);
                        this.$message.error("网络异常");
                    });
                }).catch(() => {
                    this.$message.info('已取消操作!');
                });
            },
            // 删除试题
            handleDeleted(row) {
                this.$confirm('此操作将永久删除试题 ' + ', 是否继续?', '提示', {
                    type: 'warning'
                }).then(() => {
                    let params = {
                        questionId: row.id
                    };
                    console.log("试题删除请求参数：");
                    console.log(params);
                    axios.post(app_url + "/question/delete.do?id=" + row.id).then((response) => {
                        if (response.data.flag) {
                            console.log(response.data);
                            this.$message.success(response.data.message);
                            this.getList(this.pagination.currentPage);
                        } else {
                            //失败消息提醒
                            this.$message.error(response.data.message);
                        }
                    }).catch((error) => {
                        console.log(error);
                        this.$message.error("网络异常");
                    });
                }).catch(() => {
                    this.$message.info('已取消操作!');
                });
            }
        }
    })
</script>
</html>
